<template>
  <div class="course-detail-page">
    <!-- 顶部课程信息 -->
    <div class="course-header-card">
      <div class="course-banner-text">
        {{ (course.courseName || '').slice(0, 4) }}
      </div>
      <div class="course-info">
        <div class="course-title">{{ course.courseName }}</div>
        <div class="course-meta">
          <span>教师：{{ course.teacherName }}</span>
          <span class="difficulty" :class="'diff-' + course.difficulty">难度：{{ difficultyText(course.difficulty) }}</span>
        </div>
        <div class="course-desc" v-if="course.courseIntroduce">课程简介：{{ course.courseIntroduce }}</div>
        <div class="teacher-intro" v-if="course.teacherIntroduce">教师简介：{{ course.teacherIntroduce }}</div>
      </div>
    </div>

    <!-- Tab切换 -->
    <div class="tab-center">
      <el-tabs v-model="activeTab" class="course-tabs">
        <el-tab-pane label="文章" name="article"></el-tab-pane>
        <el-tab-pane label="视频" name="video"></el-tab-pane>
        <el-tab-pane label="作业" name="homework"></el-tab-pane>
        <el-tab-pane label="讨论" name="reply"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 文章列表 -->
    <div v-if="activeTab === 'article'" class="article-list-area">
      <el-empty v-if="blogList.length === 0" description="暂无文章" />
      <div v-else>
        <div v-for="blog in blogList" :key="blog.blogId" class="article-list-item">
          <div class="article-notice-tag">文章</div>
          <div class="article-content">
            <div class="article-title">{{ blog.title.toUpperCase() }}</div>
            <div class="article-meta">作者：{{ blog.author }}</div>
            <div class="article-content-preview">{{ blog.content.slice(0, 60) }}{{ blog.content.length > 60 ? '...' : '' }}</div>
            <el-button type="primary" plain @click="showBlogDetail(blog.blogId)" style="margin-top: 10px;">查看详情</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频列表 -->
    <div v-if="activeTab === 'video'" class="video-list-area">
      <el-empty v-if="videoList.length === 0" description="暂无视频" />
      <div v-else>
        <div v-for="video in videoList" :key="video.videoId" class="video-list-item">
          <div class="video-notice-tag">视频</div>
          <div class="video-content">
            <div class="video-title">{{ video.title }}</div>
            <el-button
              type="primary"
              plain
              @click="showVideoDetail(video.videoId, route.query.id)"
              style="margin-top: 10px;"
            >观看视频</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 作业列表 -->
    <div v-if="activeTab === 'homework'" class="homework-list-area">
      <el-empty v-if="homeworkList.length === 0" description="暂无作业" />
      <div v-else>
        <div v-for="hw in homeworkList.filter(hw => new Date(hw.startTime) <= new Date())" :key="hw.examId" class="homework-list-item">
          <div class="hw-score">得分: {{ hw.score }}/总分: {{ hw.totalScore }}</div>
          <div class="hw-notice-tag">通知</div>
          <div class="hw-content">
            <div class="homework-title">{{ hw.title }}</div>
            <div class="homework-meta">
              <span>开始时间：{{ hw.startTime }}</span>
              <span>结束时间：{{ hw.endTime }}</span>
            </div>
            <el-button
              v-if="!hw.enter && !isHomeworkEnded(hw.endTime)"
              type="primary"
              plain
              @click="handleEnterHomework(hw)"
              style="margin-top: 8px;"
            >开始答题</el-button>
            <el-button
              v-else-if="hw.enter && !isHomeworkEnded(hw.endTime)"
              type="success"
              plain
              @click="goHomework(hw)"
              style="margin-top: 8px;"
            >继续答题</el-button>
            <el-button
              v-else
              type="info"
              plain
              disabled
              style="margin-top: 8px; color: #bbb; border-color: #eee; background: #f8f8f8;"
            >已结束</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 博客详情弹窗 -->
    <el-dialog
      v-model="blogDetailVisible"
      width="900px"
      class="blog-detail-dialog"
      :show-close="true"
    >
      <template #header>
        <div class="blog-detail-title">{{ (blogDetail.title || '').toUpperCase() }}</div>
      </template>
      <div class="markdown-body">
        <MarkdownIt :source="blogDetail.content || ''" :options="mdOptions" />
      </div>
    </el-dialog>

    <!-- 视频详情弹窗 -->
    <el-dialog v-model="videoDetailVisible" width="900px" :show-close="true" class="video-detail-dialog">
      <template #header>
        <div class="video-detail-title">{{ (videoDetail.title || '').toUpperCase() }}</div>
      </template>
      <div class="video-detail-content">
        <div class="video-player-wrapper">
          <video
            v-if="videoDetail.video"
            :src="getVideoUrl(videoDetail.video)"
            controls
            class="video-player"
          />
        </div>
        <div class="video-detail-desc" v-if="videoDetail.content">{{ videoDetail.content }}</div>
      </div>
    </el-dialog>

    <!-- 讨论Tab -->
    <template v-if="activeTab === 'reply'">
      <div class="reply-area">
        <!-- 一级评论输入 -->
        <el-input
          v-model="replyContent"
          type="textarea"
          :rows="3"
          maxlength="300"
          show-word-limit
          placeholder="说点什么吧…"
          class="reply-input"
        />
        <el-button type="primary" :loading="replySubmitting" @click="submitReply" style="margin-top:10px;">发布</el-button>
        <el-divider />
        <!-- 评论列表 -->
        <el-skeleton v-if="replyLoading" rows="4" animated />
        <div v-else>
          <div v-if="replyList.length === 0" class="reply-empty">暂无评论</div>
          <div v-for="item in replyList" :key="item.id" class="reply-item">
            <div class="reply-main">
              <span class="reply-user"> {{ item.author }}</span>
              <span class="reply-content">{{ item.content }}</span>
              <el-button size="small" text @click="replyChildrenShow[item.id]=!replyChildrenShow[item.id]">回复</el-button>
            </div>
            <!-- 二级评论输入 -->
            <div v-if="replyChildrenShow[item.id]" class="reply-child-input">
              <el-input
                v-model="replyChildrenInput[item.id]"
                type="textarea"
                :rows="2"
                maxlength="200"
                show-word-limit
                placeholder="回复内容…"
              />
              <el-button size="small" type="primary" @click="submitChildReply(item.id, item.postUserId)">发布</el-button>
            </div>
            <!-- 二级评论列表 -->
            <div v-for="child in item.children" :key="child.id" class="reply-child">
              <span class="reply-user"> {{ child.author }}</span>
              <span class="reply-content">@ {{ child.postAuthor }}：{{ child.content }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ChatDotRound, EditPen } from '@element-plus/icons-vue'
import { getBlogListService, getBlogDetailService, getCourseDetailVOService } from '@/apis/course'
import { getVideoListService, getVideoDetailService } from '@/apis/video'
import { getReplyListService, addReplyService, deleteReplyService } from '@/apis/reply'
import { getHomeworkListService } from '@/apis/exam'
import { enterExamService } from '@/apis/exam'
import router from '@/router'
import { ElMessage } from 'element-plus'
import MarkdownIt from 'vue3-markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

const route = useRoute()
const defaultBanner = 'https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
const course = ref({
  courseName: '',
  teacherName: '',
  difficulty: '',
  cover: '',
  description: '',
  courseIntroduce: '',
  teacherIntroduce: ''
})
const activeTab = ref('article')

const blogList = ref([])
const blogDetail = ref({})
const blogDetailVisible = ref(false)

const videoList = ref([])
const videoDetail = ref({})
const videoDetailVisible = ref(false)

const replyList = ref([])
const replyLoading = ref(false)
const replyPage = ref(1)
const replyPageSize = ref(10)
const replyTotal = ref(0)
const replyContent = ref('') // 一级评论输入
const replySubmitting = ref(false)
const replyChildrenInput = ref({}) // 二级评论输入内容
const replyChildrenShow = ref({})  // 控制二级输入框显示

const homeworkList = ref([])
const homeworkPage = ref(1)
const homeworkPageSize = ref(10)
const homeworkTotal = ref(0)

const mdOptions = {
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang }).value}</code></pre>`
      } catch (__) {}
    }
    return `<pre class="hljs"><code>${MarkdownIt.utils.escapeHtml(str)}</code></pre>`
  }
}


const getVideoUrl = (path) => {
  if (!path) return '';
  const fileName = path.split('\\').pop().split('/').pop();
  return `http://localhost:1011/upload/directory/${fileName}`;
};

onMounted(async () => {
  const courseId = route.query.id
  if (courseId) {
    // 获取课程详情
    const detailRes = await getCourseDetailVOService(courseId)
    if (detailRes.code === 1000 && detailRes.data) {
      course.value = {
        ...course.value,
        ...detailRes.data
      }
    }
    // 获取博客列表
    const res = await getBlogListService(courseId)
    if (res.code === 1000 && Array.isArray(res.data)) {
      blogList.value = res.data
    }
  }
})

watch(activeTab, async (val) => {
  if (val === 'video') {
    const courseId = route.query.id
    if (courseId) {
      const res = await getVideoListService(courseId)
      if (res.code === 1000 && Array.isArray(res.data)) {
        videoList.value = res.data
      }
    }
  }
})

function difficultyText(val) {
  if (val === 1 || val === '1') return '简单'
  if (val === 2 || val === '2') return '中等'
  if (val === 3 || val === '3') return '困难'
  return val || '普通'
}

async function showBlogDetail(blogId) {
  const courseId = route.query.id
  const res = await getBlogDetailService({ blogId, courseId })
  if (res.code === 1000 && res.data) {
    blogDetail.value = res.data
    blogDetailVisible.value = true
  }
}

async function showVideoDetail(videoId, courseId) {
  const res = await getVideoDetailService(videoId, courseId)
  if (res.code === 1000 && res.data) {
    videoDetail.value = res.data
    videoDetailVisible.value = true
  }
}

async function fetchReplyList() {
  replyLoading.value = true
  const courseId = route.query.id
  const res = await getReplyListService({ courseId, page: replyPage.value, pageSize: replyPageSize.value })
  if (res.code === 1000 && Array.isArray(res.data)) {
    // 直接赋值，后端已返回树结构
    replyList.value = res.data
  }
  replyLoading.value = false
}

watch([activeTab, replyPage], ([tab]) => {
  if (tab === 'reply') fetchReplyList()
})

async function submitReply() {
  if (!replyContent.value.trim()) return
  replySubmitting.value = true
  const courseId = route.query.id
  // postUserId 建议从登录用户信息获取
  const postUserId = 1 // TODO: 替换为实际登录用户ID
  await addReplyService({ content: replyContent.value, courseId, postUserId })
  replyContent.value = ''
  replySubmitting.value = false
  fetchReplyList()
}

async function submitChildReply(parentId, replyUserId) {
  const content = replyChildrenInput.value[parentId]
  if (!content || !content.trim()) return
  const courseId = route.query.id
  const postUserId = 1 // TODO: 替换为实际登录用户ID
  await addReplyService({ content, courseId, postUserId, parentId, replyUserId })
  replyChildrenInput.value[parentId] = ''
  replyChildrenShow.value[parentId] = false
  fetchReplyList()
}

async function handleDeleteReply(id) {
  await deleteReplyService(id)
  fetchReplyList()
}

async function fetchHomeworkList() {
  const courseId = route.query.id
  const res = await getHomeworkListService(courseId)
  if (res.code === 1000) {
    homeworkList.value = res.rows || []
    homeworkTotal.value = res.total || 0
  }
}

watch([activeTab, homeworkPage, homeworkPageSize], ([tab]) => {
  if (tab === 'homework') fetchHomeworkList()
})

// 加入作业
async function handleEnterHomework(hw) {
  try {
    const res = await enterExamService({ examId: hw.examId })
    if (res.code === 1000) {
      ElMessage.success('加入作业成功！')
      hw.enter = true // 立即切换按钮
    } else {
      ElMessage.error(res.msg || '加入作业失败')
    }
  } catch (e) {
    ElMessage.error('网络异常，加入作业失败')
  }
}

// 进入作业
function goHomework(hw) {
  router.push(`/c-oj/anwser?examId=${hw.examId}&examTitle=${encodeURIComponent(hw.title)}&examEndTime=${hw.endTime}&courseId=${route.query.id}`)
}

// 判断作业是否已结束
function isHomeworkEnded(endTime) {
  if (!endTime) return false;
  // 兼容字符串和Date对象
  const end = new Date(endTime.replace(/-/g, '/'));
  return Date.now() > end.getTime();
}
</script>

<style lang="scss">
.course-detail-page {
  background: #f7f7f7;
  min-height: 100vh;
  .course-header-card {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(50,197,255,0.08);
    padding: 36px 48px 36px 36px;
    margin: 32px auto 24px auto;
    max-width: 900px;
    min-height: 180px;
    gap: 36px;
    position: relative;
    @media (max-width: 700px) {
      flex-direction: column;
      align-items: center;
      padding: 24px 12px;
      gap: 18px;
    }
    .course-banner-text {
      width: 80px;
      height: 80px;
      background: #26c6da;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: bold;
      color: #fff;
      letter-spacing: 2px;
      box-shadow: 0 2px 8px rgba(38,198,218,0.10);
      margin-bottom: 8px;
      user-select: none;
    }
    .course-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .course-title {
        font-size: 2.1rem;
        font-weight: 800;
        color: #222;
        margin-bottom: 10px;
        line-height: 1.2;
      }
      .course-meta {
        font-size: 1.1rem;
        color: #666;
        margin-bottom: 10px;
        display: flex;
        gap: 32px;
        align-items: center;
        .difficulty {
          font-weight: 600;
          &.diff-1 { color: #67c23a; }
          &.diff-2 { color: #e6a23c; }
          &.diff-3 { color: #f56c6c; }
        }
      }
      .course-desc, .teacher-intro {
        font-size: 1rem;
        color: #444;
        margin-bottom: 6px;
        line-height: 1.7;
        word-break: break-word;
        background: #f7fafc;
        border-radius: 8px;
        padding: 8px 14px;
      }
      .teacher-intro {
        color: #888;
        background: #f5f7fa;
      }
    }
  }
  .tab-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    margin-bottom: 0;
  }
  .course-tabs {
    width: 900px;
    max-width: 90vw;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(50,197,255,0.08);
    padding: 0 0 0 0;
    display: flex;
    justify-content: center;
    .el-tabs__header {
      margin: 0;
      border-bottom: none;
      display: flex;
      justify-content: center;
    }
    .el-tabs__nav {
      display: flex;
      justify-content: center;
      width: 100%;
    }
    .el-tabs__item {
      font-size: 20px;
      font-weight: 600;
      color: #222;
      padding: 18px 36px 12px 36px;
      border-radius: 12px 12px 0 0;
      margin: 0 8px;
      transition: background 0.2s, color 0.2s;
      &:hover {
        background: #f0f8ff;
        color: #32C5FF;
      }
      &.is-active {
        color: #32C5FF;
        background: #f7fafc;
        box-shadow: 0 2px 8px rgba(50,197,255,0.06);
      }
    }
    .el-tabs__active-bar {
      height: 3px;
      background: linear-gradient(90deg, #32C5FF 0%, #67c23a 100%);
      border-radius: 2px;
    }
  }
  .article-list-area {
    max-width: 700px;
    margin: 0 auto;
    margin-top: 32px;
  }
  .article-list-item {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(50,197,255,0.04);
    padding: 18px 20px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
    position: relative;
    &:hover {
      box-shadow: 0 4px 16px rgba(50,197,255,0.12);
    }
    .article-notice-tag {
      min-width: 54px;
      height: 54px;
      background: #1eafff;
      color: #fff;
    font-size: 18px;
      font-weight: bold;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 22px;
      user-select: none;
      box-shadow: 0 2px 8px rgba(30,175,255,0.10);
      letter-spacing: 2px;
    }
    .article-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .article-title {
      font-size: 20px;
      font-weight: 700;
      color: #222;
      margin-bottom: 10px;
      letter-spacing: 1px;
      text-align: center;
      text-transform: uppercase;
  }
    .article-meta {
    color: #888;
      font-size: 15px;
      margin-bottom: 8px;
      text-align: left;
  }
    .article-content-preview {
    color: #666;
    font-size: 15px;
    margin-bottom: 2px;
      text-align: left;
    }
    .el-button {
      min-width: 110px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
    }
  }
  .video-list-area {
    max-width: 700px;
    margin: 0 auto;
    margin-top: 32px;
  }
  .video-list-item {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(50,197,255,0.04);
    padding: 18px 20px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
    &:hover {
      box-shadow: 0 4px 16px rgba(50,197,255,0.12);
    }
    .video-notice-tag {
      min-width: 54px;
      height: 54px;
      background: #1eafff;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 22px;
      user-select: none;
      box-shadow: 0 2px 8px rgba(30,175,255,0.10);
      letter-spacing: 2px;
    }
    .video-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .video-title {
      font-size: 20px;
      font-weight: 700;
      color: #222;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }
    .el-button {
      min-width: 110px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
    }
  }
  .homework-list-area {
    max-width: 700px;
    margin: 0 auto;
    margin-top: 32px;
  }
  .homework-list-item {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(50,197,255,0.04);
    padding: 18px 20px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
    position: relative;
    &:hover {
      box-shadow: 0 4px 16px rgba(50,197,255,0.12);
    }
    .hw-score {
      position: absolute;
      top: 18px;
      right: 28px;
      font-size: 18px;
      font-weight: 600;
      color: #32C5FF;
      background: #eaf8ff;
      border-radius: 8px;
      padding: 2px 14px;
      box-shadow: 0 2px 8px rgba(50,197,255,0.06);
    }
    .hw-notice-tag {
      min-width: 54px;
      height: 54px;
      background: #1eafff;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 22px;
      user-select: none;
      box-shadow: 0 2px 8px rgba(30,175,255,0.10);
      letter-spacing: 2px;
    }
    .hw-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .homework-title {
      font-size: 20px;
      font-weight: 700;
      color: #222;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }
    .homework-meta {
      color: #888;
      font-size: 15px;
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
    .el-button {
      min-width: 110px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
    }
  }
}

.blog-detail-dialog {
  :deep(.el-dialog) {
    border-radius: 32px !important;
    box-shadow: 0 12px 48px rgba(50,197,255,0.18) !important;
    background: #fff !important;
    overflow: hidden;
  }
  :deep(.el-dialog__header) {
    padding: 0;
    border-radius: 32px 32px 0 0 !important;
  }
  .blog-detail-title {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #222;
    background: #f7fafc;
    border-radius: 32px 32px 0 0;
    margin-bottom: 0;
    padding: 24px 0 12px 0;
    text-transform: uppercase;
  }
  .el-dialog__body {
    background: #e8f5e9;
    border-radius: 0 0 24px 24px;
    padding: 40px 36px 32px 36px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .markdown-body {
    font-size: 17px;
    line-height: 1.8;
    color: #222;
    word-break: break-word;
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 16px auto;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(50,197,255,0.08);
    }
    // 代码块
    pre, code {
      background: #f4f4f4;
      border-radius: 6px;
      padding: 2px 6px;
      font-size: 15px;
      color: #2d3a4b;
    }
    pre {
      padding: 12px;
      overflow-x: auto;
    }
    // 标题
    h1, h2, h3, h4, h5 {
      font-weight: bold;
      color: #32C5FF;
      margin: 18px 0 10px 0;
    }
    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.2em; }
    // 列表
    ul, ol {
      margin: 10px 0 10px 24px;
    }
    li {
      margin-bottom: 4px;
    }
    // 链接
    a {
      color: #1976d2;
      text-decoration: underline;
      &:hover {
        color: #32C5FF;
      }
    }
    // 引用
    blockquote {
      border-left: 4px solid #32C5FF;
      background: #f0f8ff;
      padding: 8px 16px;
      color: #555;
      margin: 12px 0;
    }
    // 表格
    table {
      border-collapse: collapse;
      margin: 12px 0;
      width: 100%;
      th, td {
        border: 1px solid #e0e0e0;
        padding: 6px 12px;
      }
      th {
        background: #e0f7fa;
      }
    }
  }
}

.video-detail-dialog {
  :deep(.el-dialog) {
    border-radius: 32px !important;
    box-shadow: 0 12px 48px rgba(50,197,255,0.18) !important;
    background: #fff !important;
    overflow: hidden;
  }
  :deep(.el-dialog__header) {
    border-radius: 32px 32px 0 0 !important;
    padding: 0;
  }
  .video-detail-title {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #222;
    background: #f7fafc;
    border-radius: 32px 32px 0 0;
    margin-bottom: 0;
    padding: 24px 0 12px 0;
    text-transform: uppercase;
  }
  .video-detail-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: 0 0 32px 32px;
    padding: 40px 36px 32px 36px;
    box-sizing: border-box;
  }
  .video-player-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
  }
  .video-player {
    width: 100%;
    max-width: 800px;
    min-height: 320px;
    background: #f6f8fa;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(50,197,255,0.10);
    outline: none;
    display: block;
  }
  .video-detail-desc {
    font-size: 1.08rem;
    color: #444;
    background: #f7fafc;
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 0;
    line-height: 1.8;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
  }
}

.reply-area {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(50,197,255,0.10);
  padding: 32px 32px 24px 32px;
  margin-top: 24px;
}
.reply-input {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  .el-textarea__inner {
    border-radius: 12px;
    font-size: 16px;
    padding: 14px;
  }
}
.el-button[type="primary"] {
  min-width: 100px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 0;
}
.reply-item {
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f4f8;
  background: #f9fbfd;
  border-radius: 12px;
  padding: 18px 18px 10px 18px;
  box-shadow: 0 2px 8px rgba(50,197,255,0.06);
}
.reply-main {
  font-size: 17px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .reply-user {
    color: #32C5FF;
    font-weight: 700;
    margin-right: 10px;
    font-size: 18px;
  }
  .reply-content {
    color: #222;
  font-size: 16px;
    margin-right: 10px;
  }
  .el-button {
    font-size: 14px;
    color: #32C5FF;
    padding: 0 8px;
    border-radius: 6px;
    margin-left: 8px;
    background: #f0f8ff;
    transition: background 0.2s, color 0.2s;
    &:hover {
      background: #32C5FF;
      color: #fff;
    }
  }
}
.reply-child {
  margin-left: 38px;
  font-size: 15px;
  color: #666;
  margin-bottom: 6px;
  background: #f5f7fa;
  border-radius: 8px;
  padding: 8px 14px;
  .reply-user {
    color: #67c23a;
    font-weight: 700;
    margin-right: 6px;
    font-size: 16px;
  }
  .reply-content {
    color: #444;
    font-size: 15px;
  }
}
.reply-child-input {
  margin-left: 38px;
  margin-bottom: 10px;
  .el-textarea__inner {
    border-radius: 8px;
    font-size: 15px;
    padding: 10px;
  }
  .el-button {
    min-width: 80px;
    font-size: 15px;
    border-radius: 8px;
    margin-top: 6px;
  }
}
.reply-empty {
  color: #bbb;
  text-align: center;
  margin: 36px 0;
  font-size: 17px;
}
</style> 